<template>
	<div>
		<div>首页home.vue</div>
		<h1>
			{{ obj }}
			<button @click="btn">按钮</button>
		</h1>
		<h1>
			{{ obj1 }}
			<button @click="rtn">按钮1</button>
		</h1>
		<h1>
			{{ str }}
			<button @click="atn">按钮1</button>
		</h1>
		<h1>{{ str1 }}</h1>
	</div>
	<div>
		<button @click="btnStr">str2</button>
		<button @click="btnNum">num</button>
	</div>
	<News></News>
</template>

<!-- 纯Vue3 语法糖写法-->
<!-- <script setup>
import News from '@/components/News.vue';
let str2 = '张小三XXXX';
const btnStr = () => {
	alert(str2);
};
let num = 100;
const btnNum = () => {
	alert(num);
};

// import { ref, reactive } from 'vue';  //已经在vite.config.ts中配置AutoImport,这里不导入也可以
// 方法1:响应式ref:
let obj = ref({
	a: 1
}); //ref:是一个响应式数据,需要.value
const btn = () => {
	obj.value.a = 11;
	obj.value.b = 2222;
	console.log(obj.value.a, obj.value.b);
};

// 方法2:响应式reactive:
let obj1 = reactive({
	a: 1
}); //reactive:是一个响应式数据,不需要.value
const rtn = () => {
	obj1.a = 2;
	obj1.b = 3;
	console.log(obj1.a, obj1.b);
};

// 注意事项reactive:
// ref 什么类型都可以写
// reactive 只能写对象或数组
let str = reactive(['a', 'b', 'c']);
const atn = () => {
	str[2] = 'xxx';
};
</script> -->

<!-- Vue3+Vue2 -->
<script type="text/javascript">
import News from '@/components/News.vue';
// import { ref, reactive } from 'vue';  //已经在vite.config.ts中配置AutoImport,这里不导入也可以
export default {
	setup() {
		let str = reactive(['a', 'b', 'c']);
		const atn = () => {
			str[2] = 'xxxxx';
		};
		return {
			str, //return数据
			atn //也要return方法
		};
	},
	components: {
		News
	}
};
</script>

<!-- Vue3做了向下兼容,也支持Vue2的写法(有些不行) -->
<!-- <script type="text/javascript">
import News from '@/components/News.vue';
export default {
	data() {
		return {
			obj: {
				a: 1
			}
		};
	},
	methods: {
		btn() {
			this.obj.a = 222;
			console.log(this);
		}
	},
	components: {
		News
	}
};
</script> -->
